<template>
    <div class="person">
        <h2>{{ name }}</h2>
        <h2>{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, toRefs, toRef } from 'vue';

let person = reactive({ name: '张三', age: 18 }) // 数据
let { name, age } = toRefs(person)
let nl = toRef(person, 'age')
console.log(nl.value);

console.log(toRefs(person));



// 方法
function changeName() {
    name.value += '#'
    console.log(person.name, name);    
}
function changeAge() {
    age.value += 1
    console.log(age);
    
}

</script>

<style scoped>

.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>
